<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 山有木兮木有枝
  Date: 2021/12/1
  Time: 21:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>


    <style>
        .btn-file > input {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            font-size: 23px;
            cursor: pointer;
            filter: alpha(opacity=0);
            opacity: 0;

            direction: ltr;
        }

        .fileinput .thumbnail > img {
            max-height: 100%;
        }



        .fileinput.input-group > * {
            position: relative;
            z-index: 2;
        }


        .row {
            margin-bottom: 30px;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        .form-group {
            margin-bottom: 30px;
        }

        .submit {
            margin-left: 30px;
        }

        .modal-btns {
            text-align: center;
        }

        .checkbox {
            position: relative;
            height: 30px;
        }
        .checkbox input[type='checkbox'] {
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            opacity: 0;
        }
        .checkbox label {
            position: absolute;
            left: 30px;
            top: 0;
            height: 20px;
            line-height: 20px;
        }
        .checkbox label:before {
            content: '';
            position: absolute;
            left: -30px;
            top: 0;
            width: 20px;
            height: 20px;
            border: 1px solid #ddd;
            border-radius: 50%;
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
        }

        .checkbox label:after {
            content: '';
            position: absolute;
            left: -22px;
            top: 3px;
            width: 6px;
            height: 12px;
            border: 0;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            background: #fff;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
        }

        .checkbox input[type='checkbox']:checked + label:before {
            background: #4cd764;
            border-color: #4cd764;
        }
        .checkbox input[type='checkbox']:checked + label:after {
            background: #4cd764;
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div>
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/main/gomain"  class="btn btn-primary btn-sm" role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp; 主&nbsp;&nbsp; 页</a></li>
                <li class="active">角色管理</li>
                <li><a href="${pageContext.request.contextPath}/role/findAll">角色管理</a></li>
                <li class="active">角色添加</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <%--            ${pageContext.request.contextPath}/article/addArticle?currentPage=${currentPage}&rows=${rows}--%>
            <form class="form-horizontal" action="#" method="get">
                <div class="form-group">
                    <label for="roleName" class="col-lg-2 control-label">角色名</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" id="roleName" name="roleName" placeholder="输入角色名" >
                    </div>
                </div>

                <div class="form-group">
                    <label for="roleDesc" class="col-lg-2 control-label">角色所属功能</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" id="roleDesc" name="roleDesc" placeholder="输入所属功能" >
                    </div>
                </div>


                <div id="funAll"></div>


                <!-- 演示初始化下拉列表的功能 -->
                <div class="form-group">
                    <label for="roleState" class="col-lg-2 control-label">可用性</label>
                    <div class="col-lg-10">
                        <select class="form-control" name="roleState" id="roleState">
                            <option disabled value="" selected>--请选择--</option>
                            <option value="1" >可用</option>
                            <option value="0">不可用</option>
                        </select>
                    </div>
                </div>



                <div class="modal-btns">
                    <button type="button" class="btn btn-primary submit" id="button">添 加</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>

    $(function (){
        $.ajax({
            url: "${pageContext.request.contextPath}/role/findFunAll",
            type: "post",
            dataType:"json",
            success:function (fun){
                $.each(fun,function (pr_i,pr_fun){
                    if(pr_fun.childrenFunction.length>0 && pr_fun.fatherFunctionState!==0){
                        let $div1=$("<div class='form-group'>");
                        $("<label class='col-lg-4 control-label'>").text(pr_fun.fatherFunctionName).appendTo($div1)
                        let $div2= $("<div class='col-lg-8' data-toggle='"+pr_fun.fatherFunctionID+"' id='"+pr_fun.fatherFunctionID+"'>");
                        $div2.appendTo($div1)
                        $.each(pr_fun.childrenFunction,function (i,ch_fun){
                            if(ch_fun.funState!==0){
                                console.log(pr_fun.fatherFunctionID)
                                let $div=$("<div class='checkbox'>");
                                $("<input type='checkbox' name='functionId' class='one' data-toggle='"+ch_fun.funId+"'  value='"+ch_fun.funId+"' id='functionId"+pr_i+"_"+i+"'>").appendTo($div)
                                $("<label>").attr("for","functionId"+pr_i+"_"+i+"").text(ch_fun.funName).appendTo($div)
                                $div.appendTo($div2)
                            }
                        })
                        $div1.appendTo($("#funAll"))
                    }


                })
            }
        })
    })




    $("#button").click(function (){
        let ones=$(".one:checked")
        if(ones.length===0){
            alert("请选择要角色的功能！")
        }else if($("#userName").val()==='' || $("#userSex").val()===''){
            alert("角色名和状态不能为空！")
        }else {
            let arr_id=[];
            $.each(ones,function(i,n){
                arr_id.push($(n).val())
            })
            console.log(arr_id.join(","))
            $.ajax({
                url:"${pageContext.request.contextPath}/role/addRole",
                type:"post",
                data:{"roleName":$("#roleName").val(),"roleDesc":$("#roleDesc").val(),"roleState":$("#roleState").val(),"functionId":arr_id.join(",")},
                cache:false,
                async:false,
                success:function (flag){
                    alert(flag)
                    window.location.href="${pageContext.request.contextPath}/role/findAll"

                }
            })
        }




    })

</script>

</body>
</html>
